<template>
  <div class="Map" id="container" ref="container" style="width: 100%;height: 500px;"></div>
</template>
<script setup>
  const props = defineProps({
    point:{
      type:Array
    }
  })
  onMounted(()=>{
    watchEffect(()=>{
      let lng = props.point?props.point[0]:116.404 ;
      let lat = props.point?props.point[1]:39.915
      init(lng, lat)
    });
  })
  function init(lng, lat) {
    let map = new BMapGL.Map("container");   
    let point = new BMapGL.Point(lng, lat);  // 创建点坐标 
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    let marker = new BMapGL.Marker(point);        // 创建标注   
    map.addOverlay(marker);                     // 将标注添加到地图中
    map.addEventListener('click', function(e) {
      map.clearOverlays();
      point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
      marker = new BMapGL.Marker(point);        // 创建标注   
      map.addOverlay(marker);                     // 将标注添加到地图中
    });
  }
</script>
<style scoped>
/* @import url(); 引入css类 */
#container{
  width: 100%;
  height: 500px;
}
</style>
